<template>
  <div>
    <My></My>
    <div class="app_card mb-2 pt-4 pb-4">
      <div class="d-flex justify-content-end">
        <div class="d-flex">
          <el-button type="primary" plain @click="onEmptyMulti()">批量取消</el-button>
        </div>
      </div>
    </div>
    <div class="app_card pt-4  pb-5">
      <el-table stripe size="large" :data="dataOfTable" height="calc(100vh - 430px)" @selection-change="handleSelectionChange">

        <el-table-column fixed type="selection" width="50" />
        <el-table-column label="标题" prop="title" align="center" show-overflow-tooltip>
          <template #default="scope">{{ scope.row.title }}</template>
        </el-table-column>
        <el-table-column label="封面" prop="image" align="center" show-overflow-tooltip>
          <template #default="scope">
            <el-image preview-teleported="true" style="height: 30px" :src="scope.row.image" :zoom-rate="1.2" :max-scale="7" :min-scale="0.2" :preview-src-list="[scope.row.image]" :initial-index="0" fit="cover" />
          </template>
        </el-table-column>
        <el-table-column label="课程" prop="courseName" align="center" show-overflow-tooltip />
        <el-table-column label="资源数量" prop="pageviews" align="center" show-overflow-tooltip />
        <el-table-column label="分类" prop="topicName" align="center" show-overflow-tooltip />
        <el-table-column label="学期" prop="semesterName" align="center" show-overflow-tooltip />
        <el-table-column label="课程性质" prop="course" align="center" show-overflow-tooltip />
        <el-table-column label="所属学院" prop="academyName" align="center" show-overflow-tooltip />
        <el-table-column label="所属专业" prop="majorName" align="center" show-overflow-tooltip />
        <el-table-column label="浏览量" prop="pageviews" align="center" show-overflow-tooltip />

        <el-table-column fixed="right" label="操作" align="center" width="160">
          <template #default="scope">
            <el-button link type="primary" @click="onCancelRow(scope.row)">取消收藏</el-button>
            <el-button link type="primary">查看</el-button>
          </template>
        </el-table-column>

      </el-table>
      <div class="mt-2">
        <el-pagination background v-model:currentPage="queryParam.page" v-model:page-size="queryParam.pageSize" :page-sizes="paginationOption.pageSizes" :background="false" :layout="paginationOption.layout" :total="paginationOption.total" @size-change="handleChangeSize" @current-change="handleChangeCurrent" />
      </div>
    </div>

  </div>
</template>

<script setup>

import { ref, onMounted } from 'vue';
import { ElMessageBox, ElMessage } from 'element-plus';
import EsAjax from '@/utils/EsAjax';
import ApiUrls from '@/apis/index';
import useAuthStore from '@/stores/useAuthStore';

//组件
import My from '../My.vue';

// ======================================================
//                      变量声明
// ======================================================

const authStore = useAuthStore();
// 表格数据
const dataOfTable = ref([]);
// 表格查询参数
const queryParam = ref({
  page: 1,
  pageSize: 10,
})
// 分页栏配置数据
const paginationOption = ref({
  layout: 'total, sizes, prev, pager, next, jumper',
  pageSizes: [10, 20, 50, 100, 500, 1000],
  total: 0,
})
// 表格多选数据
const multipleSelection = ref([]);
// ======================================================
//                      点击操作
// ======================================================
// 处理表格全选
const handleSelectionChange = (val) => {
  multipleSelection.value = val
}
// 点击取消收藏
const onCancelRow = (row) => {
  ElMessageBox.confirm("确定要取消收藏吗？", "警告").then(() => {
    ElMessage.success("操作成功");
    loadData();
    EsAjax.delete(ApiUrls.articleCategoryDelete, { data: { id: row.id } })
      .then(res => {
        if (res.data.code !== 200) {
          ElMessage.warning(res.data.msg);
          return;
        }
        loadData();
      })
      .catch(err => { ElMessage.error("网络错误：", err.message) });
  }).catch(() => { });
  console.log(row)
}
// 点击批量取消
const onEmptyMulti = () => {
  let n = multipleSelection.value.length, id = multipleSelection.value.map(v => v.id).toString();
  if (n) {
    ElMessageBox.confirm("确定要清空 " + n + " 条记录吗？", "警告").then(() => {
      EsAjax.delete(ApiUrls.topicDelete, { data: { id } }).then(res => {
        if (res.data.code !== 200) {
          ElMessage.warning(res.data.msg);
          return;
        }
        ElMessage.success("操作成功");
        loadData();
      }).catch(err => {
        ElMessage.error("网络错误：" + err.message);
      })
    }).catch(() => { })
  } else {
    ElMessage.info("请选择批量数据");
  }

}

// 处理分页尺寸
const handleChangeSize = (val) => {
  console.log(`${val} items per page`);
  queryParam.value.page = 1;
  queryParam.value.pageSize = val;
  loadData();
}

// 处理页码
const handleChangeCurrent = (val) => {
  console.log(`current page: ${val}`)
  queryParam.value.page = val;
  loadData();
}

// ======================================================
//                      处理事件
// ======================================================

const loadData = () => {
  EsAjax.post(ApiUrls.collectionList, queryParam.value).then(res => {
    console.log(res)
    if (res.data.code !== 200) {
      ElMessage.warning(res.data.msg);
      return;
    }
    let { list, count } = res.data.data
    dataOfTable.value = list;
    paginationOption.value.count = count;
  }).catch(err => {
    ElMessage.error(err.message);
  })
}


onMounted(() => {
  loadData();
})

</script>
<style lang="less" scoped>
.class_name {
  position: absolute;
  font-size: 20px;
  left: 30px;
  top: 10px;
  font-weight: bold;
}
</style>

